<template>
	<div class="tabel_Background">
		<div class="tabel_Background-wra">
			<div class="header-wra">
				<div id="title">
					<span class="title-text">{{ title }}</span>
				</div>
				<div class="type-wra">
					<div class="craft" :class="isClick ? 'active-change' : 'no-active'" @click="click1">
						<span>工艺</span>
					</div>
					<div class="type" :class="!isClick ? 'active-change' : 'no-active'" @click="click2">
						<span>类别</span>
					</div>
				</div>
			</div>
			<div id="echarts_2" style="width: 100%;height: 90%;"></div>
		</div>
	</div>
</template>

<script>
	// import Detail from "./ChinaData.vue";
	import {
		getSucaiCategoryList,
		getCraft,
		getType
	} from "@/api/index";
	export default {
		name: "CraftData",
		props: {
			title: String
		},
		data() {
			return {
				total: 0,
				pieInfor: [],
				type: "craft",
				isClick: true,
			};
		},
		mounted() {
			this.getCraftInfor();
		},

		methods: {
			click1() {
				this.isClick = true;
				this.getCraftInfor();
			},

			click2() {
				this.isClick = false;
				this.getTypeInfor();
			},

			infinitScroll() {
				// 拿到表格挂载后的真实DOM
				const table = this.$refs.table;
				// 拿到表格中承载数据的div元素
				const divData = table.bodyWrapper;
				divData.onmouseover = function() {
					clearInterval(t);
				}; //鼠标移入，停止滚动
				divData.onmouseout = function() {
					start();
				}; //鼠标移出，继续滚动

				// 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
				let t;

				function start() {
					// 数据少于表格高度停止滚动
					if (divData.clientHeight >= divData.scrollHeight) {
						return;
					}
					t = setInterval(() => {
						// 元素自增距离顶部1像素
						divData.scrollTop += 1;
						// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
						if (
							divData.clientHeight + divData.scrollTop ==
							divData.scrollHeight
						) {
							// 重置table距离顶部距离
							divData.scrollTop = 0;
						}
					}, 100);
				}
				start();
			},

			drawLine() {
				var myChart = this.$echarts.init(document.getElementById("echarts_2"));
				let pieData = [];
				let legendData = [];
				let total1 = this.total;

				this.pieInfor.forEach((item, index) => {
					pieData.push({
						name: item.name,
						value: item.value
					});
					legendData.push({
						name: item.name,
						icon: "circle",
						textStyle: {
							color: "#D2D3D8" // 单独设置某一个图列的颜色
						}
					});
				});
				legendData.sort(function(a, b) {
					return JSON.stringify(a.name).length < JSON.stringify(b.name).length ? 1 : -1;
				});
				// console.log(legendData);
				if (this.isClick == true) {
					var option = {
						color: [
							"#21beeb",
							"#fdbd40",
							"#f46563",
							"#22AE98",
							"#AAF1DF",
							"#3EB2FF",
							"#A2D2FF",
							"#DFECEF",
							"#D73A57",
							"#FF636E",
							"#FFBCBB",
							"#FF8243",
							"#FFB21B"
							// "#FFE194"
							// "#34a1f3",
							// "#e5c93a",
							// "#6a6d16",
							// "#a4e149",
							// "#9c21a7",
							// "#ff0000",
							// "#ffff7f",
							// "#00aa00",
							// "#55ffff",
							// "#5500ff",
							// "#0000d4"
						],
						tooltip: {
							trigger: "item",
							formatter: "{b} : {c} ({d}%)"
						},
						legend: [{
								left: "2%",
								orient: "vertical",
								type: "scroll",
								x: "left",
								y: "top",
								itemHeight: 12, //图例的高度
								// itemGap: 13, //图例之间的间距
								top: "8%",
								padding: [5, 10, 10, 5],
								// data: ["酸化联作", "WCP", "加砂联作", "分簇射孔", "TCP"],
								data: legendData.slice(0, 7)
							},
							{
								left: "31%",
								orient: "vertical",
								type: "scroll",
								x: "left",
								y: "top",
								itemHeight: 12, //图例的高度
								// itemGap: 13, //图例之间的间距
								top: "8%",
								// align: "left",
								padding: [5, 20, 10, 5],
								// data: ["酸化联作", "WCP", "加砂联作", "分簇射孔", "TCP"],
								data: legendData.slice(7, 13)
							}
						],

						// calculable: true,
						series: [{
							name: "工艺",
							type: "pie",
							radius: ["30%", "75%"],
							center: ["74%", "50%"],
							roseType: "area",
							avoidLabelOverlap: false,
							label: {
								// show: false,
								// position: 'inside',
								formatter: "{d}%",
								textStyle: {
									// fontWeight: "bold",
									fontFamily: "Microsoft YaHei",
									color: "#FAFAFA",
									fontSize: 10
								}
							},
							labelLine: {
								show: true,
								length: 0,
								length2: 5
							},
							data: pieData.sort(function(a, b) {
								return b.value - a.value;
							})
						}]
					};
				} else if (this.isClick == false) {
					var option = {
						color: [
							"#21beeb",
							"#fdbd40",
							"#f46563",
							"#22AE98",
							"#AAF1DF",
							"#3EB2FF",
							"#A2D2FF",
							"#DFECEF",
							"#D73A57",
							"#FF636E",
							"#FFBCBB",
							"#FF8243",
							"#FFB21B"
							// "#FFE194"
							// "#34a1f3",
							// "#e5c93a",
							// "#6a6d16",
							// "#a4e149",
							// "#9c21a7",
							// "#ff0000",
							// "#ffff7f",
							// "#00aa00",
							// "#55ffff",
							// "#5500ff",
							// "#0000d4"
						],
						tooltip: {
							trigger: "item",
							formatter: "{b} : {c} ({d}%)"
						},
						legend: [{
							left: "2%",
							orient: "vertical",
							type: "scroll",
							x: "left",
							y: "center",
							itemHeight: 12, //图例的高度
							// itemGap: 13, //图例之间的间距
							// top: "8%",
							padding: [5, 10, 10, 5],
							// data: ["酸化联作", "WCP", "加砂联作", "分簇射孔", "TCP"],
							data: legendData
						}],

						// calculable: true,
						series: [{
							name: "工艺",
							type: "pie",
							radius: ["30%", "75%"],
							center: ["74%", "50%"],
							roseType: "area",
							avoidLabelOverlap: false,
							label: {
								// show: false,
								// position: 'inside',
								formatter: "{d}%",
								textStyle: {
									// fontWeight: "bold",
									fontFamily: "Microsoft YaHei",
									color: "#FAFAFA",
									fontSize: 10
								}
							},
							labelLine: {
								show: true,
								length: 0,
								length2: 5
							},
							data: pieData.sort(function(a, b) {
								return b.value - a.value;
							})
						}]
					};
				}

				myChart.setOption(option);
				let count = 0;
				myChart.off('click');
				myChart.on("click", req => {
					if (this.isClick && count == 0) {
						this.$bus.$emit("craftChoose", req.data.name);
						// window.eventBus.$emit('setCraftData', req.data.name)  // 带参数
						// this.setSessionItem('craftChoose', req.data.name);
						// console.log('111')
					} else if (!this.isClick && count == 0) {
						// this.$bus.$emit("categoryChoose", req.data.name);
						window.eventBus.$emit('setCategoryData', req.data.name) // 带参数
						// this.setSessionItem('categoryChoose', req.data.name);
						// console.log('222')
					};
				});
				window.addEventListener("resize", function() {
					myChart.resize();
				});
			},



			async getCraftInfor() {
				this.pieInfor = [];
				const {
					data: res
				} = await getCraft();
				// console.log(res.data);
				for (let i = 0; i < res.data.length; i++) {
					this.pieInfor.push({
						name: res.data[i].name,
						value: res.data[i].data,
					})
				};
				// console.log(this.pieInfor);
				this.pieInfor.forEach((item, index) => {
					this.total += item.value;
				});
				this.drawLine();
			},

			async getTypeInfor() {
				this.pieInfor = [];
				const {
					data: res
				} = await getType();
				// console.log(res.data);
				// console.log(res.data);
				let category = res.data;
				for (let i = 0; i < category.length; i++) {
					this.pieInfor.push({
						name: category[i].name,
						value: category[i].data,
					})
				};
				this.pieInfor.forEach((item, index) => {
					this.total += item.value
				});
				// console.log(this.pieInfor);
				this.drawLine();

			},
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.tabel_Background {
		margin-bottom: 5px;
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 38%;
		box-sizing: border-box;
	}

	.tabel_Background-wra {
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 100%;
		// border: 1px solid rgb(12, 50, 107);
		background-image: url("../../assets/Panel@2x.png");
		// background-image: url('./../../../assets/mobile/pre-share-page@2x.png');
		background-repeat: no-repeat;
		background-size: 100% 100%; // contain; // cover;
		padding: 2%;
		box-sizing: border-box;
	}

	.header-wra {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 10%;
	}

	#title {
		width: 22%;
		height: 100%;
		min-width: 2.96rem;
		text-align: center;
		font-size: 6px;
		background-image: url("../../assets/title_outline@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		position: relative;
	}

	.title-text {
		position: absolute;
		left: 5%;
		top: 17%;
		color: #21beeb;
		font-weight: bold;
	}

	.type-wra {
		position: relative;
		width: 32%;
		// z-index: 100;
		margin-right: -6%;
	}

	.craft {
		float: left;
		text-align: center;
		width: 40%;
		height: 110%;
		font-size: 11px;
		color: #a4e3fa;
		// background-image: url("../../assets/btn_leibie_pressed@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.craft:hover {
		background-image: url("../../assets/btn_leibie_pressed@2x.png");
	}

	.type {
		float: left;
		width: 40%;
		height: 110%;
		font-size: 105%;
		color: #a4e3fa;
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.type:hover {
		background-image: url("../../assets/btn_leibie_pressed@2x.png");
	}

	.active-change {
		background-image: url("../../assets/btn_leibie_pressed@2x.png");
	}

	.no-active {
		background-image: url("../../assets/btn_leibie_normal@2x.png");
	}
</style>
